<template>
    <div>
        <el-form :inline="true" :model="checkApply" class="demo-form-inline">
            <el-button type="primary" @click="addCheckApply">填写申请</el-button>
            <el-form-item label="病历号" class="search">
                <el-input v-model="checkApply.caseNumber"></el-input>
            </el-form-item>
            <el-form-item label="记录类型">
                <el-select v-model="checkApply.state">
                    <el-option label="请选择" value=""></el-option>
                    <el-option label="暂存" value="1"></el-option>
                    <el-option label="已开立" value="2"></el-option>
                    <el-option label="已交费" value="3"></el-option>
                    <el-option label="已登记" value="4"></el-option>
                    <el-option label="执行完" value="5"></el-option>
                    <el-option label="已退费" value="6"></el-option>
                    <el-option label="已作废" value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSearch">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table
                v-loading="loading"
                :data="tableData"
                border
                :default-sort = "{prop: 'creationTime', order: 'descending'}"
                style="width: 100%">
            <el-table-column
                    fixed
                    prop="ID"
                    label="ID"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="register.caseNumber"
                    label="病历号"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="register.realName"
                    label="病人姓名"
                    width="80">
            </el-table-column>
            <el-table-column prop="name"
                             label="项目名"
                             width="110">
            </el-table-column>
            <el-table-column
                    prop="objective"
                    label="目的要求"
                    width="120">
                <template scope="scope">
                    <span v-if="scope.row.objective===null">无</span>
                    <span v-if="scope.row.objective!==null">{{scope.row.objective}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="position"
                    label="检查部位"
                    width="120">
                <template scope="scope">
                    <span v-if="scope.row.position===null">无</span>
                    <span v-if="scope.row.position!==null">{{scope.row.position}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="isUrgent"
                    label="是否紧急"
                    :filters="[{ text: '是', value: 1 }, { text: '否', value: 0 }]"
                    :filter-method="filterTag"
                    width="120">
                <template scope="scope">
                    <el-tag type="danger" effect="dark" v-if="scope.row.isUrgent===1">是</el-tag>
                    <el-tag effect="dark" v-if="scope.row.isUrgent===0">否</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="num"
                    label="检查数量"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="result"
                    label="检查结果"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="creationTime"
                    label="开立时间"
                    sortable
                    width="200">
                <template scope="scope">
                    <!--调用过滤器显示需要的数据 -->
                    <el-tag type="success">{{scope.row.creationTime|dateFormat}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="state"
                    label="记录类型"
                    width="120">
                <template scope="scope">
                    {{scope.row.state|state}}
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="150">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-row type="flex" justify="center" class="page">
            <el-pagination
                    background
                    layout="prev, pager, next,total"
                    :page-size="pageInfo.pageSize"
                    :current-page="pageInfo.pageNum"
                    @current-change="handleCurrentChange"
                    :total="pageInfo.total">
            </el-pagination>
        </el-row>
    </div>
</template>

<script>
    import {HOST} from "../../common/config";
    import {makeDate} from '../../common/dealDate'
    export default {
        data() {
            return {
                tableData: [],
                pageInfo:[],
                checkApply:{},
                loading:true
            }
        },
        mounted:function () {
            this.getData(1);
        },
        methods: {
            getData(page){
                let path=`${HOST}/checkApplys`;
                let params={
                    currentPage:page,
                    caseNumber:this.checkApply.caseNumber,
                    state:this.checkApply.state
                };
                this.$ajax.get(path,{
                    params:params
                }).then((res)=>{
                    this.pageInfo=res.data;
                    this.tableData=res.data.list;
                    this.loading=false
                })
            },
            handleCurrentChange(val){
                this.getData(val);
            },
            addCheckApply(){
                this.$router.push('/addCheckApply');
            },
            filterTag(value, row) {
                return row.isUrgent === value;
            },
            handleSearch(){
                this.getData(1);
            },
            handleEdit(index, row) {
                this.$router.push(`/editCheckApply/${row.ID}`)
            },
            handleDelete(index, row) {
                let path=`${HOST}/checkApply/delete`;
                this.$ajax.get(path,{params:{
                        id:row.ID
                    }}).then((res)=>{
                    if(res.data===1){
                        this.$message.success("删除成功！");
                        this.getData(1);
                    }else{
                        this.$message.error("服务器异常！");
                    }
                })
            }
        },
        filters:{
            dateFormat(val){
                return makeDate(val)
            },
            state(val){
                let res='';
                switch (val) {
                    case 1:res='暂存';break;
                    case 2:res='已开立';break;
                    case 3:res='已交费';break;
                    case 4:res='已登记';break;
                    case 5:res='执行完';break;
                    case 6:res='已退费';break;
                    case 0:res='已作废';break;
                }
                return res;
            }
        }
    }
</script>

<style scoped>
    .page{
        margin-top: 10px;
    }
    .search{
        margin-left: 10px;
    }
</style>